프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

DEV

[ js] 4. 반복문 for in, foreach

2024.02.26
북마크 작성자 정보
for, while


for in   
- Array
let arry = ["a", "b", "c", "d"];

for (let i in arry){
  console.log( arry[i] );
}
-Object
let obj = {
  name : "홍길동",
  age : "25",
  nt : "chosun",
}

for( let key in obj){
  console.log( key + " : " + obj[key] );
}


forEach()
배열의 각요소를 사용해 특정 함수를 for in 반복문처럼 실행.
- element : arry 각요소
- index : arry 각 요소의 index(순서)
- array : 배열 (삭제 가능)
배열명.forEach( function(element, index, array){    });
let arry = [1,2,3,4,5,6,7,8,9,];
let sum = 0;
let output = "";

arry.forEach( function(element, index, array){
  sum += element;
  output += index + ':' + element + "=>" +sum + 'n';
});

console.log(output);


  ** 문서 객체를 선택하서 li, div를 선택해서 내용을 변경하는 등 문서 객체에 반복문은 for in이 아닌 for문을 사용해야 한다.
=> 문서 객체 배열에 for in 구문을 사용하면 문서 객체 이외에 속성값도 접근해서 length 의 값과 다른 값을 나타낸다.
<script>
        window.onload = function(){
            const h1_arry = document.getElementsByTagName("h1");
            const result_tag = document.getElementsByClassName("result_tag");

            let result = "";
            for( let i=0; i<h1_arry.length; i++){
                result += "<li>"+i+h1_arry[i].innerHTML+"</li>";
            }

            // for( let i in h1_arry ){
            //     result += "<li>"+i+h1_arry[i].innerHTML+"</li>";
            // }
            
            result_tag[0].innerHTML = result;
        }
</script>


    <h1 >text1</h1>
    <h1 >text2</h1>
    <hr>

    <div>
        <ul class="result_tag"></ul>
    </div>


//결과 for문
text1
text2
----------
0text1
1text2


//결과 for in
text1
text2
----------
0text1
1text2
lengthundefined
itemundefined
namedItemundefined

 

이 포스트 공유하기

답글쓰기 전체목록